<template>
  <!-- 方案详情组件 -->
  <view class="contents">
    <view class="arc-content">
      <!-- <u-tabs class="sticky" :list="list" :is-scroll="true" bar-width="32" bar-height="4" active-color="#FBD220"
        :current="current" @change="change" inactive-color="#999999"></u-tabs> -->
      <view class="1234" id="progrn0">
        <view class="programme flex flex-ai-c">
          <view class="hkuai"></view>
          <view class="1234">
            选择首付比例
          </view>
        </view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
          <view id="demo1" :class="item.chekd ? 'scroll-view-item_Hs' : 'scroll-view-item_H'" v-for="(item,index) in scorbad"
            :key="index" @click="icondclick(item,index)">
            {{item.name}}
            <view class="fusonicon" v-show="item.chekd">
              <i-icon class="fuicon" v-show="item.chekd" icon="icongou" type="single" size="11rpx" color="#3D3D3D"></i-icon>
            </view>
          </view>
        </scroll-view>
        <view class="programme flex flex-ai-c">
          <view class="hkuai"></view>
          <view class="1234">
            选择分期数
          </view>
        </view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
          <view id="demo2" :class="item.chekd ? 'scroll-view-item_Hs' : 'scroll-view-item_H'" v-for="(item,index) in scorbadqix"
            :key="index" @click="fenqiclick(item,index)">
            {{item.name}}
            <view class="fusonicon" v-show="item.chekd">
              <i-icon class="fuicon" v-show="item.chekd" icon="icongou" type="single" size="11rpx" color="#3D3D3D"></i-icon>
            </view>
          </view>
        </scroll-view>
        <view style="padding: 30rpx 30rpx;">
          <view style="border-bottom: 1px solid #f6f6f6;"></view>
        </view>
        <!-- 两种方案 -->
        <view>
          <!-- 个人 -->
          <view class="individualScheme" v-show="personal_Percentage ==='0'?false:true">
            <view class="geren flex flex-jc-sb">
              <view class="1234 flex" @click="indeivclick(0)">
                <view class="">
                  <i-icon v-if="plantype === 0" icon="iconiconfontxuanzhong" type="single" size="40rpx" color="#ffed21"></i-icon>
                  <i-icon v-else icon="iconwancheng" type="single" size="40rpx" color="#999999"></i-icon>
                </view>
                <view class="">
                  个人户方案
                </view>
              </view>
              <view class="fangfansm" @click="personal = true">
                方案说明
                <i-icon style="margin-left: 10rpx;" icon="iconwenhao1" type="single" size="28rpx" color="#B4B4B4"></i-icon>
              </view>
            </view>
            <view class="shoufubox">
              <view class="shoufubiank flex flex-ai-c">
                <view class="bianbox">
                  <view class="money">
                    {{personal_Percentage}}
                  </view>
                  <view class="">
                    首付({{billinumber}}%)
                  </view>
                </view>
                <view class="bianbox">
                  <view class="money">
                    {{cersonal_Payments}}
                  </view>
                  <view class="">
                    月供
                  </view>
                </view>
                <view class="bianboxs">
                  <view class="money">
                    {{fenqishu}}期
                  </view>
                  <view class="">
                    期数
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 公司 -->
          <view class="individualScheme" v-show="company_Percentage ==='0'?false:true">
            <view class="gongsi flex flex-jc-sb">
              <view class="1234 flex" @click="indeivclick(1)">
                <view class="">
                  <i-icon v-if="plantype === 1" icon="iconiconfontxuanzhong" type="single" size="40rpx" color="#ffed21"></i-icon>
                  <i-icon v-else icon="iconwancheng" type="single" size="40rpx" color="#999999"></i-icon>
                </view>
                <view class="">
                  公司户方案
                </view>
              </view>
              <view class="fangfansm" @click="company = true">
                方案说明
                <i-icon style="margin-left: 10rpx;" icon="iconwenhao1" type="single" size="28rpx" color="#B4B4B4"></i-icon>
              </view>
            </view>
            <view class="shoufubox">
              <view class="shoufubiank flex flex-ai-c">
                <view class="bianbox">
                  <view class="money">
                    {{company_Percentage}}
                  </view>
                  <view class="">
                    首付({{billinumber}}%)
                  </view>
                </view>
                <view class="bianbox">
                  <view class="money">
                    {{company_Payments}}
                  </view>
                  <view class="">
                    月供
                  </view>
                </view>
                <view class="bianboxs">
                  <view class="money">
                    {{fenqishu}}期
                  </view>
                  <view class="">
                    期数
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="color-999 font-32" v-if="personal_Percentage !=='0'?false:true" style="text-align: center;padding-bottom: 20rpx;">
            该车不支持此购买方式<br>
            请重新选择首付比例和分期数
          </view>
        </view>
      </view>
      <u-gap height="24" bg-color="#F6F6F6"></u-gap>
      <view class="tostore">
        <view class="titlesgongsi">
          {{shoplist.store_Name}}
          <u-icon style="margin-left: 38rpx;" name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
        </view>
        <view class="address">
          {{shoplist.address}}
        </view>
        <view class="yuyuaestop flex flex-ai-c flex-jc-sb">
          <view class="yifuwu flex">
            <view class="iconsss" @click="mobile()">
              <i-icon icon="icondianhua" type="single" size="24rpx" color="#3D3D3D"></i-icon>
            </view>
            已服务{{shoplist.service_Amount}}万人
          </view>
          <view class="jili flex" @click="onClickNavigation()">
            <view class="iconsss">
              <i-icon icon="icondaohang" type="single" size="24rpx" color="#3D3D3D"></i-icon>
            </view>
            距你{{shoplist.distance}}km
          </view>
          <view class="yuyedaod" @click="reservationShop(shoplist)">
            预约到店
          </view>
        </view>
      </view>
      <u-gap height="24" bg-color="#F6F6F6"></u-gap>
      <!-- 优势，流程，须知 -->
      <view class="images">
        <view class="1234" id="progrn1">
          <image style="height: 354rpx;" src="https://files.yzsheng.com/client/commodity/duibitu@2x.png"></image>
        </view>
        <u-gap height="24" bg-color="#F6F6F6"></u-gap>
        <view class="1234" id="progrn2">
          <image style="height: 406rpx;" src="https://files.yzsheng.com/client/commodity/gouchebuzou@2x.png"></image>
        </view>
        <u-gap height="24" bg-color="#F6F6F6"></u-gap>
        <view class="1234" id="progrn3">
          <image style="height: 670rpx;" src="https://files.yzsheng.com/client/commodity/gouchexuzhi@2x.png"></image>
        </view>
        <!-- <u-gap height="24" bg-color="#F6F6F6"></u-gap> -->
        <view class="1234" id="progrn4">
          <!-- <image style="height: 670rpx;" src="https://files.yzsheng.com/client/commodity/gouchexuzhi@2x.png"></image> -->
        </view>
      </view>

      <view style="height: 160rpx;"></view>
      <view class="quedingbtncolor">
        <view class="flex flex-ai-c flex-jc-sb">
          <view class="ixonboxs" @click="imclick(shoplist)">
            <view class="iconobj">
              <i-icon icon="icon54" type="single" size="38rpx" color="#666666"></i-icon>
            </view>
            在线咨询
          </view>
          <view class="ixonboxs flex flex-ai-c">
            <view class="kanches" @click="Calculation()">
              免费评估
            </view>
            <view class="kancheslook" @click="reservationShop(shoplist)">
              免费到店</br>看车/购车
            </view>
            <view class="gouche" @click="goucheclick">
              在线购车
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 详情弹框-->
    <u-popup v-model="detailBox" mode="bottom" border-radius="30" length="86%">
      <view class="detiboxs">
        <view class="deheads flex flex-ac-c flex-jc-c">
          <view class="deimg">
            <!-- <image :src="imgs" mode="aspectFill"></image> -->
            <image :src="'https://files.yzsheng.com/goodimg/cartypeimg/' + imgs + '.png'" mode="aspectFill"></image>
          </view>
          <view class="detitles">
            <view class="dethead">
              {{carllist.car_Type_Name}} {{carllist.configuration_Name}}
            </view>
            <view class="debottom">
              厂家指导价：<text>{{carllist.factory_Price}}</text>
            </view>
          </view>
          <view class="deion" @click="gbdetaclick">
            <i-icon icon="iconguanbi" type="single" size="38rpx" color="#999999"></i-icon>
          </view>
        </view>
        <view style="border-bottom:1px solid #EEEEEE;"></view>
        <view class="colorboxs">
          <view class="programme flex flex-ai-c">
            <view class="hkuai"></view>
            <view class="1234">
              选择配色
            </view>
          </view>
          <view class="colorsboxs flex">
            <view class="colotext">
              外观
            </view>
            <view class="colorlists flex flex-wrap-w">
              <view class="flex flex-jc-c flex-ai-c" :class="item.chekd?'clrboxxzhong':'clrbox' " v-for="(item, index) in wgColorList"
                :key="index" @click="wgcolorClick(item,index)">
                <view class="whitess" :style="{background:item.colorCoding}"></view>
                <view class="colorname">
                  {{item.color}}
                </view>
              </view>
            </view>
          </view>
          <view class="colorsboxs flex">
            <view class="colotext">
              内饰
            </view>
            <view class="colorlists flex flex-wrap-w">
              <view class="flex flex-jc-c flex-ai-c" :class="item.chekd?'clrboxxzhong':'clrbox'" v-for="(item, index) in nsColorList"
                :key="index" @click="nsColorClick(item,index)">
                <view class="kuang21" v-if="item.neiColor.length == 1">
                  <view class="whitess" :style="{background:item.neiColor[0]}"></view>
                </view>
                <view class="kuangdoubu" v-if="item.neiColor.length == 2">
                  <view class="white4" style="border-radius: 10rpx 10rpx 0rpx 0rpx;" :style="{background:item.neiColor[0]}"></view>
                  <view class="white4" style="border-radius: 0rpx 0rpx 10rpx 10rpx;" :style="{background:item.neiColor[1]}"></view>
                </view>
                <view class="colorname">
                  {{item.color}}
                </view>
              </view>
            </view>
          </view>
          <view class="programme flex flex-ai-c">
            <view class="hkuai"></view>
            <view class="1234">
              选择首付比例
            </view>
          </view>
          <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
            <view id="demo1" :class="item.chekd ? 'scroll-view-item_Hs' : 'scroll-view-item_H'" v-for="(item,index) in scorbad"
              :key="index" @click="icondclick(item,index)">
              {{item.name}}
              <view class="fusonicon" v-show="item.chekd">
                <i-icon class="fuicon" v-show="item.chekd" icon="icongou" type="single" size="11rpx" color="#3D3D3D"></i-icon>
              </view>
            </view>
          </scroll-view>
          <view class="programme flex flex-ai-c">
            <view class="hkuai"></view>
            <view class="1234">
              选择分期数
            </view>
          </view>
          <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
            <view id="demo2" :class="item.chekd ? 'scroll-view-item_Hs' : 'scroll-view-item_H'" v-for="(item,index) in scorbadqix"
              :key="index" @click="fenqiclick(item,index)">
              {{item.name}}
              <view class="fusonicon" v-show="item.chekd">
                <i-icon class="fuicon" v-show="item.chekd" icon="icongou" type="single" size="11rpx" color="#3D3D3D"></i-icon>
              </view>
            </view>
          </scroll-view>
          <view style="padding: 30rpx 30rpx;">
            <view style="border-bottom: 1px solid #f6f6f6;"></view>
          </view>
          <!-- 两种方案 -->
          <view>
            <!-- 个人 -->
            <view class="individualScheme" v-show="personal_Percentage ==='0'?false:true">
              <view class="geren flex flex-jc-sb">
                <view class="1234 flex" @click="indeivclick(0)">
                  <view class="">
                    <i-icon v-if="plantype === 0" icon="iconiconfontxuanzhong" type="single" size="40rpx" color="#ffed21"></i-icon>
                    <i-icon v-else icon="iconwancheng" type="single" size="40rpx" color="#999999"></i-icon>
                  </view>
                  <view class="">
                    个人户方案
                  </view>
                </view>
                <view class="fangfansm" @click="personal = true">
                  方案说明
                  <i-icon style="margin-left: 10rpx;" icon="iconwenhao1" type="single" size="28rpx" color="#B4B4B4"></i-icon>
                </view>
              </view>
              <view class="shoufubox">
                <view class="shoufubiank flex flex-ai-c">
                  <view class="bianbox">
                    <view class="money">
                      {{personal_Percentage}}
                    </view>
                    <view class="">
                      首付({{billinumber}}%)
                    </view>
                  </view>
                  <view class="bianbox">
                    <view class="money">
                      {{cersonal_Payments}}
                    </view>
                    <view class="">
                      月供
                    </view>
                  </view>
                  <view class="bianboxs">
                    <view class="money">
                      {{fenqishu}}期
                    </view>
                    <view class="">
                      期数
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 公司 -->
            <view class="individualScheme" v-show="company_Percentage ==='0'?false:true">
              <view class="gongsi flex flex-jc-sb">
                <view class="1234 flex" @click="indeivclick(1)">
                  <view class="">
                    <i-icon v-if="plantype === 1" icon="iconiconfontxuanzhong" type="single" size="40rpx" color="#ffed21"></i-icon>
                    <i-icon v-else icon="iconwancheng" type="single" size="40rpx" color="#999999"></i-icon>
                  </view>
                  <view class="">
                    公司户方案
                  </view>
                </view>
                <view class="fangfansm" @click="company = true">
                  方案说明
                  <i-icon style="margin-left: 10rpx;" icon="iconwenhao1" type="single" size="28rpx" color="#B4B4B4"></i-icon>
                </view>
              </view>
              <view class="shoufubox">
                <view class="shoufubiank flex flex-ai-c">
                  <view class="bianbox">
                    <view class="money">
                      {{company_Percentage}}
                    </view>
                    <view class="">
                      首付({{billinumber}}%)
                    </view>
                  </view>
                  <view class="bianbox">
                    <view class="money">
                      {{company_Payments}}
                    </view>
                    <view class="">
                      月供
                    </view>
                  </view>
                  <view class="bianboxs">
                    <view class="money">
                      {{fenqishu}}期
                    </view>
                    <view class="">
                      期数
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="color-999 font-32" v-if="personal_Percentage !=='0'?false:true" style="text-align: center;padding-top: 20rpx;">
              该车不支持此购买方式<br>
              请重新选择首付比例和分期数
            </view>
          </view>
          <u-gap height="88" bg-color="#ffffff"></u-gap>
          <view class="btnboxhs" v-if="personal_Percentage !=='0'?false:true">
            确定
          </view>
          <view class="btnbox" @click="AddOrder" v-else>
            确定
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 个人户方案-->
    <u-popup v-model="personal" mode="bottom" border-radius="30">
      <view class="hgzbox" style="height: 486rpx;">
        <view class="hgztitle flex flex-jc-sb">
          <view class="toubus">
            <view class="titname">个人户方案</view>
          </view>
          <view @tap="personal = false">
            <u-icon name="close" color="#999999" size="30rpx"></u-icon>
          </view>
        </view>
        <view class="plr-30 mt-20" style="line-height: 60rpx;color: #66666;">
          个人户方案，是7迈车采用常规银行及厂家金融方案模式，由具备分期购车特许资质的银行、厂家金融为客户提供的一种分期购车服务。客户以分期支付的方式，以较低的门槛享受到汽车使用权和所有权。
        </view>
      </view>
    </u-popup>
    <!-- 公司户方案-->
    <u-popup v-model="company" mode="bottom" border-radius="30">
      <view class="hgzbox" style="height: 486rpx;">
        <view class="hgztitle flex flex-jc-sb">
          <view class="toubus">
            <view class="titname">公司户方案</view>
          </view>
          <view @tap="company = false">
            <u-icon name="close" color="#999999" size="30rpx"></u-icon>
          </view>
        </view>
        <view class="plr-30 mt-20" style="line-height: 60rpx;color: #66666;">
          公司户方案，是7迈车采用国际成熟的融资租赁模式，由具备融资租赁特许资质的融资租赁公司为客户提供的全新购车服务,享受更低的首付，更灵活的月供；客户以分期支付租金的方式，以较低的门槛先期享受到了汽车的使用权，并将在支付全部租金及留购价之后获得车辆所有权。
        </view>
      </view>
    </u-popup>
    <!-- 请选择配色 -->
    <view class="uni-popup" v-if="success">
      <view class="main">
        <view class="manicon">
          <i-icon icon="icongantanhao" type="single" size="92rpx" color="#FBD220"></i-icon>
        </view>
        <view class="heades mt-15">
          请选择配色
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      xedColorList: {
        type: Array,
        default: () => []
      },
      carllist: {
        type: Object,
        default: () => ({})
      }
    },
    name: "sourceDetailsZj",
    data() {
      return {
        success: false, //
        list: [{
            name: '方案',
            eg: 'a'
          },
          {
            name: '优势',
            eg: 'b'
          },
          {
            name: '流程',
            eg: 'c'
          },
          {
            name: '须知',
            eg: 'd'
          },
          {
            name: '售后服务',
            eg: 'e'
          }
        ],
        current: 0,

        fabushows: false,
        perminous: '',
        yincang: false,
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        scorbad: [{
            name: '0%',
            chekd: true,
            number: 0
          },
          {
            name: '5%',
            chekd: false,
            number: 5
          },
          {
            name: '10%',
            chekd: false,
            number: 10
          },
          {
            name: '15%',
            chekd: false,
            number: 15
          },
          {
            name: '20%',
            chekd: false,
            number: 20
          },
          {
            name: '25%',
            chekd: false,
            number: 25
          },
          {
            name: '30%',
            chekd: false,
            number: 30
          }
        ],
        scorbadqix: [{
            name: '12期',
            chekd: true,
            number: 12
          },
          {
            name: '24期',
            chekd: false,
            number: 24
          },
          {
            name: '36期',
            chekd: false,
            number: 36
          },
          {
            name: '60期',
            chekd: false,
            number: 60
          }
        ],
        billinumber: 0, //比列
        fenqishu: 12, //分期书
        personal_Percentage: '', //个人户方案首付PS：带单位
        cersonal_Payments: '', //个人户方案月供PS：带单位
        company_Percentage: '', //公司方案首付PS：带单位
        company_Payments: '', //公司方案月供PS：带单位

        detailBox: false, //详情弹框
        clorList: {
          outerColour: {
            colorCoding: '',
            color: ''
          },
          inColour: {
            colorCoding: '',
            color: '',
            neiColor: [{}]
          }
        }, //选中的颜色
        imgs: '', //图片
        xedColorListS: [], //颜色list-处理过加了check
        shoplist: {}, //店铺信息
        wgColorList: [], //外观颜色list
        nsColorList: [], //内试颜色list
        detailList: {}, //详情页所有数据
        plantype: 0, //0个人1公司
        personal: false,
        company: false
      };
    },
    created() {
      // this.perminous = this.$store.state.user.userInfo.permious

    },
    watch: {
      xedColorList(list) {
        this.xedColorListS = list
        list.forEach(item => {
          this.wgColorList.push(item.outerColour) //外观颜色
          this.nsColorList.push(item.inColour) //内试颜色
        })
        this.wgColorList.forEach(item => {
          item.chekd = false
        })
        this.nsColorList.forEach(item => {
          item.chekd = false
        })
      },
      carllist(val) {
        this.imgs = val.car_Type_Id
        this.shoplist = val.goodsCarSourceStoreDetailEntity
        this.detailList = val
        this.carid = val.goods_Carsource_Id //车单id
        this.GetCarSurceLoanplan() ////方案
      }
    },
    methods: {
      //方案
      async GetCarSurceLoanplan(type) {
        try {
          const res = await this.$api.commodity.GetCarSurceLoanplan({
            id: this.carid,
            percentage: this.billinumber, //首付比例
            month: this.fenqishu //分期数
          })
          this.personal_Percentage = res.data.personal_Percentage //个人户方案首付PS：带单位
          this.cersonal_Payments = res.data.cersonal_Payments //个人户方案月供PS：带单位
          this.company_Percentage = res.data.company_Percentage //公司方案首付PS：带单位
          this.company_Payments = res.data.company_Payments //公司方案月供PS：带单位
        } catch (err) {}
      },

      scroll: function(e) {
        this.old.scrollTop = e.detail.scrollTop
      },
      danbaoclick() {
        uni.navigateTo({
          url: '/pages_order/securedTransactions/securedTransactions?page=index'
        })
      },
      //点击方案
      change(index) {
        console.log(this.list[index].name)
        this.current = index;
        //从评论区域回到顶部
        uni.createSelectorQuery().select('#progrn' + index).boundingClientRect(data => { //目标位置的节点：类或者id
          uni.createSelectorQuery().select(".arc-content").boundingClientRect(res => { //最外层盒子的节点：类或者id
            uni.pageScrollTo({
              duration: 200, //过渡时间
              scrollTop: data.top - res.top - -345, //到达距离顶部的top值
            })
          }).exec()
        }).exec();
      },
      //比列
      icondclick(item, index) {
        this.billinumber = item.number
        this.GetCarSurceLoanplan()
        let listbox = [] //暂存赋值
        this.scorbad.forEach((item, i) => {
          if (i === index) {
            if (item.chekd === false) {
              item.chekd = true
            } else {}
          } else {
            item.chekd = false
          }
          listbox.push(item)
        })
        this.scorbad = listbox
      },
      //分期
      fenqiclick(item, index) {
        this.fenqishu = item.number
        this.GetCarSurceLoanplan()
        let listbox = [] //暂存赋值
        this.scorbadqix.forEach((item, i) => {
          if (i === index) {
            if (item.chekd === false) {
              item.chekd = true
            } else {}
          } else {
            item.chekd = false
          }
          listbox.push(item)
        })
        this.scorbadqix = listbox
      },
      //在线购车
      goucheclick() {
        this.detailBox = true
      },
      //个人公司
      indeivclick(type) {
        if (type === 0) {
          this.plantype = 0
        } else {
          this.plantype = 1
        }
      },
      // 确认购车
      async AddOrder() {
        var shoufubil //首付
        var yuegong //月供
        if (this.plantype === 0) {
          shoufubil = this.personal_Percentage //个人户方案首付PS：带单位
          yuegong = this.cersonal_Payments //个人户方案月供PS：带单位
        } else {
          shoufubil = this.company_Percentage //公司方案首付PS：带单位
          yuegong = this.company_Payments //公司方案月供PS：带单位
        }
        var indebilie = Number(shoufubil.match(/-?([1-9]\d*(\.\d*)*|0\.[1-9]\d*)/g))
        var mousbilie = Number(yuegong.match(/-?([1-9]\d*(\.\d*)*|0\.[1-9]\d*)/g))
        // var numArr = Number(this.detailList.factory_Price.match(/-?([1-9]\d*(\.\d*)*|0\.[1-9]\d*)/g))

        if (this.clorList.outerColour.color === '') {
          this.success = true
          let a = setTimeout(() => {
            clearTimeout(a)
            this.success = false
          }, 1000);
          return false
        }
        if (this.clorList.inColour.color === '') {
          this.success = true
          let a = setTimeout(() => {
            clearTimeout(a)
            this.success = false
          }, 1000);
          return false
        }
        var color = JSON.stringify(this.clorList)
        try {
          const res = await this.$api.commodity.AddOrder({
            car_Id: this.detailList.goods_Carsource_Id, //车辆Id
            store_Id: this.shoplist.store_Id, //店铺Id
            configuration_Id: Number(this.detailList.configuration_Id), //配置Id
            colour: color, //颜色
            down_Payment_Rate: this.billinumber, //首付比率
            installment: this.fenqishu, //分期数
            down_Payment_Money: indebilie, //首付金额
            finance_Plan_Type: this.plantype, //金融方案类型 0：个人方案，1：公司方案
            installment_Monthly_Money: mousbilie, //月供
            factory_Money: this.detailList.factory_Price, //厂商指导价，单位;元
          })
          if (res.code === 200) {
            uni.navigateTo({
              url: '/pages_commodity/idCarsAuthentication/idCarsAuthentication?typeid=' + res.data
            })
          }
        } catch (err) {}
      },
      //关闭弹框
      gbdetaclick() {
        this.detailBox = false
      },
      //外观颜色
      wgcolorClick(item, index) {
        let listbox = [] //暂存赋值
        this.wgColorList.forEach((item, i) => {
          if (i === index) {
            if (item.chekd === false) {
              item.chekd = true
            } else {}
          } else {
            item.chekd = false
          }
          listbox.push(item)
        })
        this.wgColorList = listbox
        this.clorList.outerColour = item
      },
      //内饰颜色
      nsColorClick(item, index) {
        let listbox = [] //暂存赋值
        this.nsColorList.forEach((item, i) => {
          if (i === index) {
            if (item.chekd === false) {
              item.chekd = true
            } else {}
          } else {
            item.chekd = false
          }
          listbox.push(item)
        })
        this.nsColorList = listbox
        this.clorList.inColour = item
      },
      //预约到店
      reservationShop(types) {
        let name = this.carllist.car_Type_Name + this.carllist.configuration_Name
        uni.navigateTo({
          url: '/pages_commodity/reservationShop/reservationShop?stopid=' + types.store_Id + '&carid=' + this.carllist
            .configuration_Id + '&sAmount=' + types.service_Amount + '&colorList=' + encodeURIComponent(JSON.stringify(
              this.xedColorList)) + '&typdei=110' + '&namecar=' + name
        })
      },
      //聊天
      imclick(types) {
        this.$store.commit('news/createConversationActive', {
          user: types.store_Name, //店铺名称
          img: types.brandUrl, //店铺头像
          lastTime: '', //
          userId: types.store_Id, //店铺id
          conversationID: 'C2C' + types.store_Id,
        })
        this.$store.commit('news/setCardInfo', {
          imgSrc: types.brandUrl,
          name: types.name,
          // type: 'accessory',
        })
        uni.navigateTo({
          url: '/pages_common/contactSeller/contactSeller?user=' + types.store_Name + '&pageId=' + this.bookid
        })
      },
      // 免费贷款测算
      Calculation() {
        let list = {
          bid: this.carllist.brand_Id,
          brand: this.carllist.brand_Name,

          car_Type_Id: this.carllist.car_Type_Id,
          car_Type_Name: this.carllist.car_Type_Name,

          carid: this.carllist.configuration_Id,
          configuration_Name: this.carllist.configuration_Name,

          type: 110
        }
        uni.navigateTo({
          url: '/pages_order/carPurchaseCalculation/carPurchaseCalculation?list=' + JSON.stringify(list)
        })
      },
      // 点击导航
      onClickNavigation() {
        uni.openLocation({
          latitude: this.shoplist.lat,
          longitude: this.shoplist.lon
        })
      },
      mobile() {
        uni.makePhoneCall({
          phoneNumber: this.shoplist.phone //仅为示例
        })
      }
    }
  }
</script>

<style>
  // 弹框
  .uni-popup {
    position: fixed;
    top: 40%;
    bottom: 0;
    left: 35%;
    right: 0;
    width: 200rpx;
    height: 200rpx;
    /* background-color: rgba(0, 0, 0, 0.3); */
    display: flex;
    align-items: center;
    /*定义body的元素垂直居中*/
    justify-content: center;
    /*定义body的里的元素水平居中*/
    z-index: 999999;
  }

  .main {
    width: 200rpx;
    height: 200rpx;
    background: #666666;
    border-radius: 20rpx;
    padding: 28rpx;
  }

  .manicon {
    display: flex;
    align-items: center;
    /*定义body的元素垂直居中*/
    justify-content: center;
    /*定义body的里的元素水平居中*/
  }

  .heades {
    text-align: center;
    font-size: 28rpx;
    color: #FFFFFF;
  }


  /* 车源详情弹框 */
  .detiboxs {}

  .deheads {
    padding: 32rpx;
  }

  .deimg {
    background-color: #000000;
    width: 210rpx;
    height: 140rpx;
    border-radius: 5rpx;
  }

  .deimg image {
    width: 210rpx;
    height: 140rpx;
    border-radius: 5rpx;
  }

  .detitles {
    padding: 0rpx 20rpx;
  }

  .dethead {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .debottom {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 30rpx;
  }

  .debottom text {
    text-decoration: line-through;
  }

  .scroll-view_H {
    white-space: nowrap;
    width: 100%;
    padding: 0rpx 0rpx 0rpx 48rpx;
  }

  .scroll-view-item {
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    font-size: 36rpx;
  }

  .scroll-view-item_H {
    display: inline-block;
    width: 120rpx;
    height: 54rpx;
    border: 2rpx solid #D1D1D1;
    border-radius: 5rpx;
    margin-right: 24rpx;
    text-align: center;
    line-height: 54rpx;
  }

  .scroll-view-item_Hs {
    display: inline-block;
    width: 120rpx;
    height: 54rpx;
    border: 2rpx solid #FBD220;
    border-radius: 5rx;
    margin-right: 24rpx;
    text-align: center;
    line-height: 54rpx;
  }

  .fusonicon {
    text-align: center;
    line-height: 29rpx;
    width: 0;
    height: 0;
    border-top: 30rpx solid #FBD220;
    border-left: 30rpx solid transparent;
    margin-top: -56rpx;
    margin-bottom: 36rpx;
    margin-left: 90rpx;
  }

  .fuicon {
    position: absolute;
    margin-top: -26rpx;
    margin-left: -16rpx;
  }

  .programme {
    padding: 20rpx 30rpx;

    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .hkuai {
    width: 8rpx;
    height: 24rpx;
    background: #FBD220;
    border-radius: 4rpx;
    margin-right: 10rpx;
  }

  .relebox {
    width: 730rpx;
    height: 440rpx;
  }

  .rel {
    float: left;
    width: 33.3%;
    height: 250rpx;
    transition: all 0.8s;
  }

  .relmobile {
    float: left;
    width: 33.3%;
    height: 250rpx;
    position: absolute;
    top: 1080rpx;
    transition: all 0.8s;
  }

  .reimg {}

  .rename {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-top: 10rpx;
    margin-bottom: 100rpx;
  }

  .tuichu {
    display: flex;
    justify-content: center;
    width: 750rpx;
  }

  .tuicimg {
    width: 62rpx;
    height: 62rpx;
  }

  .individualScheme {
    padding: 0rpx 30rpx;

    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .fangfansm {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .shoufubox {
    padding: 10rpx 30rpx 30rpx 0rpx;
  }

  .shoufubiank {
    width: 690rpx;
    height: 152rpx;
    background: #ffffff;
    box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
  }

  .bianbox {
    width: 229rpx;
    border-right: 1px solid #EEEEEE;
    text-align: center;
  }

  .bianboxs {
    width: 229rpx;
    text-align: center;
  }

  .money {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FBB000;
  }

  .tostore {
    padding: 40rpx 30rpx;
  }

  .titlesgongsi {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .address {
    margin-top: 20rpx;
    line-height: 42rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .yuyuaestop {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .yifuwu {}

  .iconsss {
    width: 40rpx;
    height: 40rpx;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    border-radius: 50%;
    text-align: center;
    line-height: 40rpx;
    margin-right: 18rpx;
  }

  .iconobj {
    /* margin-left: 14rpx; */
  }

  .yuyedaod {
    text-align: center;
    line-height: 60rpx;
    width: 176rpx;
    height: 60rpx;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    border-radius: 30rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #3D3D3D;
  }

  .images {
    width: 100%;
  }

  .images image {
    width: 100%;
  }

  .quedingbtncolor {
    width: 750rpx;
    height: 121rpx;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    padding: 20rpx 30rpx;
    z-index: 999;
  }

  .ixonboxs {
    text-align: center;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }

  .iconsss {}

  .kanches {
    width: 166rpx;
    height: 88rpx;
    background: #3D3D3D;
    border-radius: 44rpx 0px 0px 44rpx;

    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FBD220;
    /* padding: 14rpx; */
    line-height: 88rpx;
    margin-right: 2rpx;
  }

  .kancheslook {
    width: 166rpx;
    height: 88rpx;
    background: #3D3D3D;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FBD220;
    padding: 12rpx;
  }

  .gouche {
    width: 240rpx;
    height: 88rpx;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    border-radius: 0px 44rpx 44rpx 0px;

    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 88rpx;
  }

  .colorsboxs {
    padding: 20rpx 30rpx;
  }

  .colotext {
    width: 100rpx;
  }

  .colorlists {}

  .clrboxxzhong {
    width: 170rpx;
    height: 60rpx;
    background: #ffe23e;
    border-radius: 10rpx;
    margin-left: 15rpx;
    margin-bottom: 15rpx;
  }

  .clrbox {
    width: 170rpx;
    height: 60rpx;
    background: #EEEEEE;
    border-radius: 10rpx;
    margin-left: 15rpx;
    margin-bottom: 15rpx;
  }

  .whitess {
    width: 31rpx;
    height: 31rpx;
    border-radius: 50%;
    border: 1px solid;
    margin-right: 12rpx;
  }

  .colorname {
    width: 60px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .kuangdoubu {
    border: 1px solid;
    width: 31rpx;
    height: 31rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12rpx;
  }

  .white4 {
    width: 31rpx;
    height: 16rpx;
    background: rgba(251, 172, 113, 1);
  }

  .btnbox {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    text-align: center;
    line-height: 88rpx;
    position: fixed;
    bottom: 0;
  }

  .btnboxhs {
    width: 100%;
    height: 88rpx;
    background: #d0cfcf;
    text-align: center;
    line-height: 88rpx;
    position: fixed;
    bottom: 0;
  }

  .sticky {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    position: -webkit-sticky;
    /* #endif */
    position: sticky;
    top: var(--window-top);
    z-index: 99;
  }


  .u-tabs {
    /* 	position: fixed;
  		top: 0;
  		left: 0; */
    z-index: 999;
  }

  .titles {
    font-size: 36upx;
    height: 80upx;
    width: 100%;
    line-height: 80upx;
    padding-left: 24upx;
    font-weight: 500;
  }

  .conts {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 32upx;
  }

  .contitem {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32upx;
  }

  .contitem image,
  .offeritem image {
    width: 48upx;
    height: 48upx;
  }

  .myoffer {
    margin-top: 16upx;
    background: #fff;
  }

  .offer {
    width: 100%;
    height: 160upx;
    display: flex;
    justify-content: space-around;
  }

  .offeritem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32upx;
  }

  .hgzbox {
    font-family: PingFang SC;
    font-weight: 500;
    height: 780rpx;
  }

  .hgztitle {
    border-bottom: 1px solid #EEEEEE;
    padding: 20rpx 40rpx;
  }

  .toubus {
    line-height: 40rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
</style>
